<template>
  <div class="system-info">
    <h2>系统信息</h2>
    <div v-if="systemInfo">
      <p>CPU 使用率: {{ systemInfo.cpu_percent }}%</p>
      <p>内存使用率: {{ systemInfo.memory_percent }}%</p>
      <p>磁盘使用率: {{ systemInfo.disk_percent }}%</p>
    </div>
    <div class="actions">
      <button @click="getInfo">获取系统信息</button>
      <button @click="showMessage">显示消息</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { callPython, registerPythonCallbacks } from '../utils/pywebview';

export default {
  name: 'SystemInfo',
  setup() {
    const systemInfo = ref(null);

    // 获取系统信息
    const getInfo = async () => {
      const info = await callPython.getSystemInfo();
      if (info) {
        systemInfo.value = info;
      }
    };

    // 显示消息
    const showMessage = async () => {
      await callPython.showMessage('这是来自前端的消息！');
    };

    // 组件挂载时注册回调函数
    onMounted(() => {
      registerPythonCallbacks();
      
      // 覆盖默认的回调实现
      window.setSystemInfo = (info) => {
        systemInfo.value = info;
      };
    });

    return {
      systemInfo,
      getInfo,
      showMessage
    };
  }
};
</script>

<style scoped>
.system-info {
  padding: 20px;
}

.actions {
  margin-top: 20px;
}

button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
